<template>
  <div>
    <slot name="header"></slot>
    <Form :ref="formName"
          :model="formData"
          :rules="copyFormDataRules"
          :label-width="140"
          :label-position="labelPosition">
      <Row :gutter="24"
           type="flex">
        <Col v-bind="grid"
             v-for="(item, index) in copyFormData.slice(0, 3)"
             :key="index">
            <template  v-if="item.fileName==='qwCitySelect'" >
                <qw-city-select :itemData="item.data" :formData="formData" :getName="true" @handleChangeFormData="handleChangeFormData"></qw-city-select>
            </template>

         <!-- <template  v-if="item.fileName==='qwSelectCategoryTree'" >
            <qw-select-category-tree :itemData="item.data" :formData="formData"  @handleChangeFormData="handleChangeFormData"></qw-select-category-tree>
          </template>-->
            <component v-else :itemData="item.data"
                   :formData="formData"
                   v-bind:is="item.fileName"
                   @handleChangeFormData="handleChangeFormData"></component>
          <!--防止查询框只有一个时候enter页面刷新-->
          <Input v-show="false"></Input>
        </Col>
        <!-- 超过三条需要折叠 start -->
        <template v-if="collapse">
          <Col v-bind="grid"
               v-for="(item, index) in copyFormData.slice(3)"
               :key="index+3">

          <component :itemData="item.data"
                     :formData="formData"
                     v-bind:is="item.fileName"
                     @handleChangeFormData="handleChangeFormData"></component>
          </Col>
        </template>
        <!-- 超过三条需要折叠 end -->
        <Col v-bind="grid"
             class="ivu-text-right form-lastitem-right">
        <qw-submit-button :isShowFold="copyFormData.length>3?true:false"
                          :formName="formName"
                          :isCollapse="collapse"
                          @handleSubmit="handleSubmit"
                          @handleReset="handleReset"
                          @collapseChange="collapseChange"></qw-submit-button>
        </Col>
      </Row>
    </Form>
    <slot name="footer"></slot>
  </div>
</template>
<script>
    import forms from '@/mixins/dynamicform'; // 混入通用代码
    import qwSubmitButton from '@/components/common/formItem/qwSubmitButton'; // 表单操作组件
    import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
    import qwInputNumber from '@/components/common/formItem/qwInputNumber'; // 数字输入框组件
    import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
    import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
    import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件
    import qwCitySelect from '@/components/common/formItem/qwCitySelect'; // 级联组件

    import qwSelectCategoryTree from '@/components/common/formItem/qwSelectCategoryTree'; // 表单下拉树组件
    export default {
        mixins: [forms],
        props: {
            dynamicData: {
                type: Object
            }
        },
        components: {
            qwInput,
            qwSelect,
            qwDatePicker,
            qwSelectTree,
            qwInputNumber,
            qwCitySelect,
            qwSubmitButton,
            qwSelectCategoryTree
        }
    }
</script>
